<!-- 验证码记录 列表 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <h4 class="c-title">验证码记录</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form
                class="select-form" :inline="true" label-width="6.5em" @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <in-input name="数据 id：" v-model="state.p.id"></in-input>
                <in-input name="请求人ip：" v-model="state.p.ip"></in-input>
                <in-input name="接收人：" v-model="state.p.recipient"></in-input>
                <in-input name="验证码：" v-model="state.p.vc"></in-input>
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5()">查询</el-button>
                </in-item>
                <br />
                <in-enum name="所属信道：" v-model="state.p.type" :jv="{1: '手机短信', 2: '邮箱信息'}" jtype="3" def="不限"></in-enum>
                <in-enum name="验证状态：" v-model="state.p.status" :jv="{1: '已发送', 2: '验证成功', 3: '验证失败'}" jtype="3" def="不限"></in-enum>
                <br />
                <in-enum name="所属业务：" v-model="state.p.business" :jv="state.businessTypeJson" jtype="2" def="不限"></in-enum>
                <br />
                <in-item name="综合排序：">
                    <el-radio-group v-model="state.p.sortType" class="s-radio-text">
                        <!-- <el-radio label="默认" :value="0"></el-radio>-->
                        <el-radio label="最近发送" :value="1"></el-radio>
<!--                        <el-radio label="发送时间" :value="8"></el-radio>-->
                        <el-radio label="验证时间" :value="9"></el-radio>
                        <el-radio label="验证次数" :value="10"></el-radio>
                    </el-radio-group>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">批量删除</el-button>
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection"></td-info>
                <td-info name="数据id" prop="id" width="100px"></td-info>
                <td-info name="请求人ip" prop="ip"></td-info>
                <td-enum name="所属信道" prop="type" :jv="{1: '手机短信', 2: '邮箱信息'}"></td-enum>
                <td-enum name="所属业务" prop="business" :jv="state.businessTypeJson"></td-enum>
                <td-info name="接收人" prop="recipient" min-width="100px"></td-info>
                <td-info name="验证码" prop="vc"></td-info>
                <td-info name="消息全文" prop="fullMessage" type="textarea" width="200px"></td-info>
                <el-table-column label="消息状态" min-width="100px">
                    <template #default="s">
                        <b v-if="s.row.status === 1" style="color: blue;">已发送</b>
                        <b v-if="s.row.status === 2" style="color: green;">验证成功</b>
                        <b v-if="s.row.status === 3" style="color: red;">验证失败</b>
                        <span v-if="s.row.status === 2 || s.row.status === 3">&nbsp;({{ s.row.checkCount }}次)</span>
                    </template>
                </el-table-column>
                <el-table-column label="发送时间" width="220px">
                    <template #default="s">
                        <span>{{ sa.forDate(s.row.createTime, 2) }} - </span>
                        <b>{{ sa.isNull(sa.forDate2(s.row.createTime), '无') }}</b>
                    </template>
                </el-table-column>
                <el-table-column label="验证时间" width="220px">
                    <template #default="s">
                        <span v-if="s.row.lastCheckTime">{{ sa.forDate(s.row.lastCheckTime, 2) }} - </span>
                        <b>{{ sa.isNull(sa.forDate2(s.row.lastCheckTime), '无') }}</b>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="100px">
                    <template #default="s">
<!--                        <el-button class="c-btn" type="text" plain icon="el-icon-View" @click="get(s.row)">查看</el-button>-->
                        <el-link class="c-btn" type="primary" plain icon="el-icon-Delete" @click="del(s.row)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="sys-vc-log-list">
import {getCurrentInstance, onMounted, reactive} from "vue";

const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    p: {
        id: '',		// id号 
        type: '',		// 所属信道 (1=短信验证码,2=邮箱验证码) 
        business: '',		// 业务类型 
        recipient: '',		// 接收人
        vc: '',		        // 验证码值
        status: '',		// 数据状态(1=已发送,2=验证成功,3=验证失败) 
        pageNo: 1,		// 当前页 
        pageSize: 10,	// 页大小 
        sortType: 0		// 排序方式 
    },
    // 所有业务类型 
    businessTypeJson: {
        PHONE_USER_LOGIN: "短信登录",	
        PHONE_BIND_PHONE: "绑定手机号",	
        PHONE_PHONE_SENS: "密保手机验证",
        PHONE_PHONE_SENS_update_phone: "密保手机验证(换绑手机)",
        PHONE_PHONE_SENS_update_email: "密保手机验证(换绑邮箱)",
        PHONE_PHONE_SENS_update_password: "密保手机验证(修改密码)",
        PHONE_UPDATE_PHONE: "换绑手机号",	
        PHONE_REG_ACCOUNT: "注册账号",		
        PHONE_FORGET_PASSWORD: "找回密码",
        EMAIL_USER_LOGIN: "邮箱登录",		
        EMAIL_UPDATE_EMAIL: "绑定/换绑邮箱",	
    },
    dataCount: 0,   // 数据总数
    dataList: [],   // 数据表格
})

// 组件加载时触发
onMounted(() => {
    f5();
})

// ------------------ 函数 ------------------
// 查找数据
const f5 = function() {
    sa.ajax('/SysVcLog/getList', sa.removeNull(state.p), function (res) {
        state.dataList = res.data;
        state.dataCount = res.dataCount;
    })
};

// 删除
const del = function (data) {
    sa.confirm('是否删除，此操作不可撤销', function() {
        sa.ajax('/SysVcLog/delete?id=' + data.id, function(res) {
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};
// 批量删除
const deleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirm(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax('/SysVcLog/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

// 对外开放 
defineExpose({f5})

</script>

<style scoped lang="scss">
//:deep(.s-text-list-p){
//    color: green;
//}
//.allow-url-box{max-height: 0px; overflow: hidden; transition: all 1s; padding-left: 20px; cursor: text; padding-right: 14px;}
//.allow-url-box-show {max-height: 200px;}
//.c-card :deep(.el-alert__title){ font-size: 14px; }
</style>
